<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe620;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe61f;</span>
      输入城市/景点/游玩主题
    </div>
    <router-link to="/city">

      <div class="header-right">
        {{city}}
        <span class="iconfont">&#xe600;</span>
      </div>

    </router-link>



  </div>

</template>

<script>
export default {
  name: "Header",
  props:{
    city:String
  },
  mounted() {
    this.getOptions()
  },
  methods: {
    getOptions: function() {

    }
  }
}
</script>

<style lang="stylus" scoped>
.header
  line-height .86rem
  background #00bcd4
  display flex
  .header-left
    float left
    width .64rem
    .back-icon
      text-align center
      font-size .8rem
      color: #fff
  .header-input
    flex 1
    height .64rem
    line-height .64rem
    background #ffffff
    border-radius .2rem
    margin-top .1rem
    padding-left .2rem
    color: #ccc
  .header-right
    float right
    min-width: 1.04rem
    padding 0 .1rem
    text-align center
    color: #fff
</style>
